<template>
  <div class="type_b">
    <div class="day-set">
      <div class="inp">
        <el-radio-group v-model="byDay.isEveryDay" @change="radioChange">
          <el-radio :label="true" size="large">
            <span>每</span>
            <input type="text" v-model="byDay.everyDayNum">
            <span>天</span>
          </el-radio>
        </el-radio-group>
      </div>
      <div>
        <el-checkbox v-model="byDay.isSkipLegalLeave" @change="checkboxChange" label="跳过法定节假日" size="large" />
      </div>
      <div>
        <el-checkbox v-model="byDay.isSkipWeekends" @change="checkboxChange" label="跳过周末" size="large" />
      </div>
    </div>
    <div class="list">
      <div class="picker-list" v-for="(eItem, eIndex) in byDay.everyDayPicker" :key="eIndex">
        <div class="prick">
          <el-time-picker format="HH:mm" value-format="HH:mm" v-model="eItem.value" is-range :clearable="false"
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
        </div>
        <div class="btn">
          <el-button type="primary" @click="handChangepicker('everyDayPicker', 'Plus', eIndex + 1)">
            <el-icon>
              <Plus />
            </el-icon>
          </el-button>
          <el-button type="danger" v-if="byDay.everyDayPicker.length > 1" @click="handChangepicker('everyDayPicker', 'Minus', eIndex)">
            <el-icon>
              <Minus />
            </el-icon>
          </el-button>
        </div>
        <div class="check">
          <el-checkbox v-model="eItem.isLiveClass" label="设置为直播课" size="large" />
        </div>
      </div>
    </div>
    <div>
      <el-checkbox v-model="byDay.everyDayNoClassTime" @change="checkboxChange" label="手动添加不排课时间" size="large" />
    </div>
    <div class="list_b">
      <div class="picker-list" v-for="(eItem2, eIndex2) in byDay.everyDayDate" :key="eIndex2">
        <div class="prick">
          <el-date-picker v-model="eItem2.value" type="date" placeholder="请选择" />
        </div>
        <div class="btn">
          <el-button type="primary" @click="handChangeDate('everyDayDate', 'Plus', eIndex2 + 1)">
            <el-icon>
              <Plus />
            </el-icon>
          </el-button>
          <el-button type="danger" v-if="byDay.everyDayDate.length > 1" @click="handChangeDate('everyDayDate', 'Minus', eIndex2)">
            <el-icon>
              <Minus />
            </el-icon>
          </el-button>
        </div>
      </div>
    </div>
    <div class="day-set">
      <el-radio-group v-model="byDay.isEveryDay" @change="radioChange">
        <el-radio :label="false" size="large">每个工作日</el-radio>
      </el-radio-group>
    </div>
    <div class="list">
      <div class="picker-list" v-for="(wItem, wIndex) in byDay.workingDayPicker" :key="wIndex">
        <div class="prick">
          <el-time-picker format="HH:mm" value-format="HH:mm" v-model="wItem.value" is-range :clearable="false"
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
        </div>
        <div class="btn">
          <el-button type="primary" @click="handChangepicker('workingDayPicker', 'Plus', wIndex + 1)">
            <el-icon>
              <Plus />
            </el-icon>
          </el-button>
          <el-button type="danger" v-if="byDay.workingDayPicker.length > 1" @click="handChangepicker('workingDayPicker', 'Minus', wIndex)">
            <el-icon>
              <Minus />
            </el-icon>
          </el-button>
        </div>
        <div class="check">
          <el-checkbox v-model="wItem.isLiveClass" label="设置为直播课" size="large" />
        </div>
      </div>
    </div>
    <div>
      <el-checkbox v-model="byDay.workingDayNoClassTime" @change="wCheckboxChange" label="手动添加不排课时间" size="large" />
    </div>
    <div class="list_b">
      <div class="picker-list" v-for="(wItem2, wIndex2) in byDay.workingDayDate" :key="wIndex2">
        <div class="prick">
          <el-date-picker v-model="wItem2.value" type="date" placeholder="请选择" />
        </div>
        <div class="btn">
          <el-button type="primary" @click="handChangeDate('workingDayDate', 'Plus', wIndex2 + 1)">
            <el-icon>
              <Plus />
            </el-icon>
          </el-button>
          <el-button type="danger" v-if="byDay.workingDayDate.length > 1" @click="handChangeDate('workingDayDate', 'Minus', wIndex2)">
            <el-icon>
              <Minus />
            </el-icon>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Plus, Minus } from '@element-plus/icons-vue'
import { reactive } from "vue";
const byDay = reactive(
  {
    isEveryDay: true,
    everyDayNum: null,
    isSkipLegalLeave: false,
    isSkipWeekends: false,
    everyDayPicker: [{ value: null, isLiveClass: false }],
    everyDayNoClassTime: false,
    everyDayDate: [{ value: "" }],
    workingDayPicker: [{ value: null, isLiveClass: false }],
    workingDayNoClassTime: false,
    workingDayDate: [{ value: "" }],
  }
)

// 添加、移除上课时间
function handChangepicker(name, type, index) {
  if (type == 'Plus') {
    byDay[name].splice(index, 0, { value: null, isLiveClass: false })
  } else {
    byDay[name].splice(index, 1)
  }
}
// 添加、移除不排课时间
function handChangeDate(name, type, index) {
  if (type == 'Plus') {
    byDay[name].splice(index, 0, { value: ""})
  } else {
    byDay[name].splice(index, 1)
  }
}

// 每n天、每个工作日
function radioChange(val) {
  if (val) {
    byDay.workingDayNoClassTime = false
  }else{
    byDay.everyDayNoClassTime = false
    byDay.isSkipLegalLeave = false
    byDay.isSkipWeekends = false
  }
}
// 每n天
function checkboxChange(val) {
  if (val) {
    byDay.isEveryDay = true
    byDay.workingDayNoClassTime = false
  }
}
// 每个工作日
function wCheckboxChange(val) {
  if (val) {
    byDay.isEveryDay = false
    byDay.everyDayNoClassTime = false
    byDay.isSkipLegalLeave = false
    byDay.isSkipWeekends = false
  }
}
</script>

<style lang="scss" scoped>
.type_b {
  padding-left: 72px;
  .day-set {
    display: flex;
    margin-bottom: 15px;

    &>div {
      margin-right: 15px;
    }

    .inp {
      display: flex;
      align-items: center;

      input {
        width: 50px;
        border: none;
        border-bottom: 1px solid #ddd;
        text-align: center;
        background: #f6f8f9;
      }
    }
  }

  .list {
    border-bottom: 1px dashed #ddd;
    margin-bottom: 10px;
  }

  .list,
  .list_b {
    .picker-list {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      &>div {
        margin-right: 15px;
      }
    }
  }
}
</style>